﻿@page "/heatmap-chart/legend-placement"

@using Syncfusion.Blazor.HeatMap
@using Syncfusion.Blazor.DropDowns
@using sf_blazor_heatmapdata
@using SFHeatMap = Syncfusion.Blazor.HeatMap
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the hourly weather forecast for some major European cities. The data label is disabled in this sample, the Tooltip displays the data point values.</p>
</SampleDescription>
<ActionDescription>
  <p> In this example, you can see how to change the display position of the Heatmap Legend. You can change the display position of Legend to left, right, bottom and top by using the <code>Position</code> property in <code>HeatMapLegendSettings</code>.</p>
  <p>Tooltip is enabled in this example. To see the Tooltip in action, hover a point or tap on a point in touch enabled devices. </p> 
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="row">
        <SfHeatMap DataSource="@DataSource">
            <HeatMapTitleSettings Text="Hourly Weather Forecast (in Celsius)">
                <HeatMapTitleTextStyle Size="15px" FontWeight="500" FontStyle="Normal"></HeatMapTitleTextStyle>
            </HeatMapTitleSettings>
            <HeatMapXAxis Labels="@XLabels"
                          LabelRotation="45"
                          LabelIntersectAction="@SFHeatMap.LabelIntersectAction.None">
            </HeatMapXAxis>
            <HeatMapYAxis Labels="@YLabels"></HeatMapYAxis>
            <HeatMapPaletteSettings>
                <HeatMapPalettes>
                    <HeatMapPalette Value="0" Color="#6EB5D0"></HeatMapPalette>
                    <HeatMapPalette Value="10" Color="#7EDCA2"></HeatMapPalette>
                    <HeatMapPalette Value="19" Color="#DCD57E"></HeatMapPalette>
                    <HeatMapPalette Value="22" Color="#DCD57E"></HeatMapPalette>
                </HeatMapPalettes>
            </HeatMapPaletteSettings>
            <HeatMapCellSettings ShowLabel="false" Format="{value} C"></HeatMapCellSettings>
            <HeatMapLegendSettings Position="@CurrentLegentPosition">
                <HeatMapLegendTitle Text="Celsius"></HeatMapLegendTitle>
            </HeatMapLegendSettings>
        </SfHeatMap>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div><h5>Legend Placement</h5></div>
    <SfDropDownList TValue="string" TItem="DataModel" PopupHeight="230px" @bind-Index="@index" Placeholder="Select a game" DataSource="@LegendPlacements">
        <DropDownListEvents TValue="string" TItem="DataModel" ValueChange="@(e => { Enum.TryParse<SFHeatMap.LegendPosition>(e.Value, out CurrentLegentPosition); })"></DropDownListEvents>
        <DropDownListFieldSettings Text="Text" Value="Id"></DropDownListFieldSettings>
    </SfDropDownList>
</div>

@code{
    private int? index { get; set; } = 0;
    SFHeatMap.LegendPosition CurrentLegentPosition;
    string[] XLabels = new string[] { "London", "Berlin", "Madrid", "Paris", "Rome", "Lisbon", "Dublin" };
    string[] YLabels = new string[] { "12AM", "2AM", "4AM", "6AM", "8AM", "10AM", "12PM", "2PM", "4PM", "6PM", "8PM", "10PM" };
    int[,] DataSource = HeatMapData.GetLegendData();
    List<DataModel> LegendPlacements = new List<DataModel>();
    protected override void OnInitialized()
    {
        base.OnInitialized();
        LegendPlacements.Add(new DataModel { Id = "0", Text = "Left" });
        LegendPlacements.Add(new DataModel { Id = "1", Text = "Right" });
        LegendPlacements.Add(new DataModel { Id = "2", Text = "Top" });
        LegendPlacements.Add(new DataModel { Id = "3", Text = "Bottom" });
    }
    class DataModel
    {
        public string Id { get; set; }
        public string Text { get; set; }
    }
}